import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Form, Col, Spin, Button, Radio, DatePicker, Modal, Input, Tooltip, Icon, Select } from 'antd';
import prompt from '@/components/Prompt';
import EditPage from '@/components/EditPage';
import AntdForm from '@/components/AntdForm';
import router from 'umi/router';
import AdSelect from '@/components/AdSelect';
import AntdFormItem from '@/components/AntdFormItem';
import AntdInput from '@/components/AntdInput';
import FileReader from '@/components/FileReader';
import AdButton from '@/components/AdButton';
import SearchSelect from '@/components/SearchSelect';
import AntdDatePicker from '@/components/AntdDatePicker';
import TrainNumInfo from './TrainNumInfo';
import OilInfo from './OilInfo';
import querystring from 'querystring';
import moment from 'moment';
import {
    formItemFragement,
    queryDict,
    filterAddFile,
    filterDeteteFile,
    formatPrice,
    getQueryString
} from '@/utils/common';
import { checkStrLength, columnsDriver, columns1 } from '@/pages/Common/common';

import { allDictList } from '@/utils/constans';
import PressureInfo from './PressureInfo';
import ArchivesDriverslInfo from './ArchivesDriverslInfo';
import {
    selectArchivesList,
    selectArchivesDetailAndInfo,
    routeUrl,
    allUrl,
    codes,
    allDispatchType,
    archivesStatusList,
    checkConfirm,
    sendSomeList
} from './utils';

const { confirm } = Modal;
const { TextArea } = Input;
const dateFormat = 'YYYY-MM-DD';
const dateFormatByM = 'YYYY-MM';
const { Option } = Select;
const { MonthPicker } = DatePicker;

@connect(({ Archives, component, loading, common }) => ({
    Archives,
    trainInfoList: Archives.trainInfoList,
    archivesDetail: Archives.archivesDetail,
    pressureInfoList: Archives.pressureInfoList,
    oilInfoList: Archives.oilInfoList,
    feeData: Archives.feeData,
    dictObject: component.dictObject,
    formValues: Archives.formValues,
    loading: loading.effects[allDispatchType.detail],
    panes: common.panes,
}))
@Form.create()
export default class ArchivesOperate extends Component {
    state = {
        detailId: '',
        selectedRows: [],
        type: '',
        cars: [],
        ownCompany: '',
        selectedRowsPre: [],
        disabled: false,
        visibleOperate: false,
        visibleTrain: false,
        showTips: false,
        startAmount: '',
        startMileage: '',
        isHK: false,
        drivers: [],


    };

    componentWillMount() {

        const allDict = [allDictList.businessType, allDictList.cabinetTypeHK,
        allDictList.archives_place];
        queryDict({ props: this.props, allDict });


    }

    componentDidMount() {

        const {
            match: {
                params: { id },
            },
            archivesDetail,
        } = this.props;
        if (!id) {
            this.getEtcStartAmount();
            return;
        }

        this.handleStateChange([{ detailId: id }]);
        const detail = archivesDetail[id];
        // if (detail) return;
        this.getArchivesDetails(id);

    }

    getEtcStartAmount = () => {
        const { dispatch } = this.props;
        dispatch({
            type: allDispatchType.getEtcStartAmount,
            payload: {},
            callback: data => {
                this.setState({
                    startAmount: data,
                });
            },
        });
    };
    getArchivesDetails = (id) => {
        const {
            match: { params },
        } = this.props;
        const { isHK } = this.state;
        const archivesId = id || params.id;
        selectArchivesDetailAndInfo({
            type: allDispatchType.detail,
            payload: { id: archivesId, isHK },
            props: this.props,
            callback: data => {
                if (data.status == 'SUBMITTED') {
                    this.setState({
                        disabled: true,
                    });
                }
                this.setState({
                    type: data.type,
                    cars: [{ id: data.vehicleId }],
                    drivers: data.trainInfo ? data.trainInfo.driverMap || [] : [],
                });
            },
        });
    };

    handleStateChange = (options = []) => {
        options.map(item => {
            this.setState(item);
        });
    };

    setTabName = payload => {
        const { dispatch } = this.props;
        dispatch({
            type: 'common/setTabsName',
            payload,
            callback: data => {
                if (!data) return;
                router.push(`${routeUrl.edit}/${payload.id}`);
            },
        });
    };

    //保存(确认、试算、提交)
    saveInfo = type => {
        const {
            form,
            dispatch,
            archivesDetail,
            match: {
                params: { id },
            },
            pressureInfoList,
            feeData,
        } = this.props;
        const { cars, ownCompany, drivers, isHK } = this.state;
        if (type == 'commit' && feeData && feeData[id]) {
            this.dispatchOperate({}, type);
            return;
        }

        form.validateFieldsAndScroll((err, values) => {
            const {
                status,
                attaQuantity,
                mdsCompanyId,
                transportEndTime,
                transportStartTime,
                settlementDate,
                ...params
            } = values;
            //司机
            if (drivers.length > 0) {
                params.driverIds = drivers.map(v => {
                    return v.id;
                });
            }
            params.isHK = isHK;

            params.operateType = type;
            if (attaQuantity) {
                params.fileTokens = filterAddFile(attaQuantity);
            }
            if (id) {
                params.id = id;
                if (attaQuantity) {
                    params.deleteFileIds = filterDeteteFile(attaQuantity, archivesDetail[id].fileList);
                }
            }

            //车辆
            if (cars.length > 0) {
                params.vehicleId = cars[0].id;
                //所属公司
                params.ownCompanyName = ownCompany;
                params.mdsCompanyId = cars[0].ownCompanyId;
            } else {
                params.vehicleId = '';
            }
            params.settlementDate = settlementDate ? moment(settlementDate).format(dateFormatByM) : '';

            //2、校验压夜
            const infoForm = this.child.props.form;
            let relationVOS = [];

            infoForm.validateFieldsAndScroll(errors => {
                if (err || errors) return;
                //余额校验
                const etcStartAmount = params.etcStartAmount || 0;
                const etcEndAmount = params.etcEndAmount || 0;
                if (Number(etcStartAmount) < Number(etcEndAmount)) {
                    prompt({ content: '发车余额必须大于等于收车余额!', type: 'error' });
                    return;
                }

                if (id) {
                    relationVOS = pressureInfoList[id].list.map(item => {
                        const { driverMap, ...restd } = item;
                        if (item.id.includes('isNew')) {
                            const { id, ...rest } = restd;
                            return rest;
                        }
                        return restd;
                    });
                } else {
                    relationVOS =
                        Object.keys(pressureInfoList).length > 0
                            ? pressureInfoList[''].list.map(item => {
                                const { driverMap, ...rest } = item;
                                return rest;
                            })
                            : [];
                }
                params.nightList = relationVOS; //压夜
                // return; //测试
                this.dispatchOperate(params, type);
            });
        });
    };

    /************操作：
    1、草稿：
    1）确认：保存数据-->确认校验-->已确认
    2、已确认：
    1)试算：保存数据-->确认校验-->试算接口-->生成费用
    2)提交：(先判断有没有费用数据)
    没有：保存数据-->确认校验-->试算接口-->生成费用(并提示费用已计算，是否进行提交)-->提交接口
    有：提交接口（提交后数据将不能编辑，是否进行提交？
    */
    dispatchOperate = (params, type) => {
        const { dispatch, formValues, feeData } = this.props;
        const { isHK, } = this.state;
        const id = params.id;
        const unit = {
            callDispatch: data => {
                this.setState(preState => ({
                    disabled: type == 'confirm' ? true : !preState.disabled,
                    showTips: false,
                }));
                if (id) {
                    this.getArchivesDetails(id);
                    this.pressureInfoList(id);
                } else {
                    this.setTabName({
                        id: data,
                        isReplaceTab: true,
                    });
                }
                selectArchivesList({ payload: formValues, props: this.props });
            },
            callCommit: tips => {
                const {
                    dispatch,
                    match: {
                        params: { id },
                    },
                    formValues,
                } = this.props;
                confirm({
                    title: `${tips}提交后数据将不能进行修改，是否进行提交？`,
                    content: ' ',
                    okText: '确定',
                    cancelText: '取消',
                    onOk: () => {
                        dispatch({
                            type: allDispatchType.commit,
                            payload: { ids: [id] },
                            callback: data => {
                                if (!data) return;
                                selectArchivesList({ props: this.props, payload: formValues });
                                this.getArchivesDetails(id);
                                this.pressureInfoList(id);
                            },
                        });
                    },
                });
            },
        };
        if (type == 'commit' && feeData && feeData[id]) {
            unit.callCommit();
            return;
        }

        dispatch({

            type: allDispatchType.operate,
            payload: params,
            callback: data => {
                // if (!data) return;

                if (type == 'save') {
                    unit.callDispatch(data);
                } else {
                    checkConfirm({
                        props: this.props,
                        id,
                        type,
                        isHK,
                        callback: () => {
                            // return; //测试
                            if (type == 'confirm') {
                                //审核确认
                                dispatch({
                                    type: allDispatchType.confirm,
                                    payload: { id },
                                    callback: data => {
                                        unit.callDispatch(data);
                                    },
                                });
                            } else {
                                //试算和提交
                                dispatch({
                                    type: allDispatchType.trial,
                                    payload: { id, type },
                                    callback: data => {
                                        unit.callDispatch(data);
                                        //试算完数据回显处理：未做
                                        if (type == 'commit') {
                                            const tips = '费用已计算，';
                                            unit.callCommit(tips);
                                        }
                                    },
                                });
                            }
                        },
                    });
                }
            },
        });
    };
    //压夜列表
    pressureInfoList = id => {
        const { dispatch } = this.props;
        dispatch({
            type: allDispatchType.pressureInfoList,
            payload: { id },
        });
    };

    infoOilAdd = e => {
        e.stopPropagation();
        this.setOilInfoModal('add');
    };
    setOilInfoModal = type => {
        const { visibleOperate } = this.state;
        this.setState({
            visibleOperate: !visibleOperate,
            type,
        });
    };

    headerOperate = () => {
        const {
            match: {
                params: { id },
            },
            archivesDetail,
        } = this.props;
        const { disabled, detailId } = this.state;
        const detail = archivesDetail[detailId] || {};
        const isCONFIRM = detail.status == 'SUBMITTED' ? true : false;
        return (
            <div>
                {!disabled ? (
                    <>
                        <Button.Group>
                            <AdButton
                                text="保存"
                                type="primary"
                                code={codes.add}
                                onClick={() => this.saveInfo('save')}
                                disabled={isCONFIRM}
                            />
                            {id && (
                                <AdButton
                                    onClick={() => {
                                        this.setState(preState => ({
                                            disabled: !preState.disabled,
                                        }));
                                    }}
                                    text="取消"
                                    code={id ? codes.edit : codes.add}
                                />
                            )}
                        </Button.Group>
                    </>
                ) : (
                        <Button.Group>
                            {id && detail.status == 'UNSEALED' && (
                                <AdButton
                                    text="审核确认"
                                    code={codes.confirm}
                                    onClick={() => this.saveInfo('confirm')}
                                    disabled={isCONFIRM}
                                />
                            )}
                            {detail.status == 'CONFIRM' && (
                                <>
                                    <AdButton
                                        text="费用试算"
                                        code={codes.trial}
                                        onClick={() => this.saveInfo('trial')}
                                        disabled={isCONFIRM}
                                    />
                                    <AdButton
                                        text="提交"
                                        code={codes.commit}
                                        onClick={() => this.saveInfo('commit')}
                                        disabled={isCONFIRM}
                                    />
                                </>
                            )}
                            <AdButton
                                onClick={() => {
                                    this.setState(preState => ({
                                        disabled: !preState.disabled,
                                    }));
                                }}
                                text="编辑"
                                type="primary"
                                disabled={isCONFIRM}
                                code={id ? codes.edit : codes.add}
                            />
                        </Button.Group>
                    )}
            </div>
        );
    };

    //移除加油记录
    removeInfoOil = e => {
        e.stopPropagation();
        const { selectedRows, detailId } = this.state;
        const { dispatch } = this.props;
        const title = '确定要移除这条数据吗？';
        confirm({
            title: title,
            content: ' ',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk: () => {
                dispatch({
                    type: allDispatchType.removeOilInfo,
                    payload: {
                        ids: selectedRows.map(v => v.id),
                    },
                    callback: data => {
                        this.setState({
                            selectedRows: [],
                        });
                        if (!data) return;
                        selectArchivesDetailAndInfo({
                            type: allDispatchType.oilInfoList,
                            payload: { id: detailId },
                            props: this.props,
                        });
                    },
                });
            },
        });
    };

    getValue = (values, type) => {
        this.setState({
            [type]: values,
        });
        if (type == 'cars') {
            const ownCompany = values[0].ownCompanyName;
            this.setState({
                ownCompany,
            });
        }
    };
    //新增车次：
    infoTrainAdd = e => {
        e.stopPropagation();
        const { detailId } = this.state;
        // if (detailId)
        this.setTrainInfoModal('add');
        this.getStartMileage();
    };
    setTrainInfoModal = type => {
        const { visibleTrain } = this.state;
        this.setState({
            visibleTrain: !visibleTrain,
            type,
        });
    };
    //获取发车里程
    getStartMileage = () => {
        const { dispatch } = this.props;
        dispatch({
            type: allDispatchType.getStartMileage,
            payload: { id: this.state.detailId },
            callback: data => {
                this.setState({
                    startMileage: data,
                });
            },
        });
    };

    onRef = ref => {
        this.child = ref;
    };
    //添加压夜
    addInfoPre = e => {
        e.stopPropagation();
        this.child.addInfoPre();
    };
    //移除压夜
    removeInfoPre = e => {
        e.stopPropagation();
        const { detailId, selectedRowsPre } = this.state;
        const { pressureInfoList } = this.props;
        const deleteIds = selectedRowsPre.map(v => v.id);
        this.deleteInfoIds = selectedRowsPre.filter(item => !item.id.includes('isNew')).map(v => v.id);
        const newData = pressureInfoList[detailId].list.filter(item => !deleteIds.includes(item.id));
        this.saveAllValue({ pressureInfoList: { [detailId]: { list: newData } } });
        this.handleStateChange([{ selectedRowsPre: [], showTips: true }]);
    };
    saveAllValue = payload => {
        const { dispatch } = this.props;
        dispatch({
            type: allDispatchType.value,
            payload: payload || {},
        });
    };

    //表格显示提示：
    showTipsFun = val => {
        this.setState({
            showTips: val,
        });
    };

    render() {
        const {
            detailId,
            selectedRows,
            type,
            visibleOperate,
            visibleTrain,
            cars,
            ownCompany,
            selectedRowsPre,
            disabled,
            startAmount,
            startMileage,
            showTips,
            isHK,
            drivers,


        } = this.state;

        const { form, archivesDetail, dictObject, loading } = this.props;
        const getFieldDecorator = form.getFieldDecorator;
        const detail = archivesDetail[detailId] || {};

        const preTitle = (
            <span>
                压夜记录
        {showTips && (
                    <span style={{ color: 'red', marginLeft: 30 }}>当前数据有变化，请注意保存</span>
                )}
            </span>
        );

        const editPageParams = {
            title: detail.archivesNo || '新增行车档案',
            headerOperate: this.headerOperate(),
            panelValue: [
                { key: '基础信息' },
                detailId &&
                detail.status !== 'UNSEALED' && {
                    key: '司机提成',
                },
                detailId && {
                    key: '车次信息',
                    extra: (
                        <AdButton
                            disabled={disabled}
                            type="primary"
                            onClick={this.infoTrainAdd}
                            text="新增车次"
                            code={codes.addTrain}
                        />
                    ),
                },
                detailId && {
                    key: '加油记录',
                    extra: (
                        <>
                            <AdButton
                                code={codes.removeOil}
                                disabled={!selectedRows.length > 0 || disabled}
                                onClick={this.removeInfoOil}
                                text="移除"
                                ghost
                                type="danger"
                            />
                            <Button.Group style={{ marginLeft: 8 }}>
                                <AdButton
                                    disabled={disabled}
                                    type="primary"
                                    onClick={this.infoOilAdd}
                                    text="新增加油"
                                    code={codes.addOil}
                                />
                            </Button.Group>
                        </>
                    ),
                },
                {
                    key: preTitle,
                    extra: (
                        <>
                            <AdButton
                                onClick={e => {
                                    this.removeInfoPre(e);
                                }}
                                ghost
                                // code={codes.delPressure}
                                disabled={disabled || selectedRowsPre.length === 0}
                                text="移除"
                                type="danger"
                            />
                            <AdButton
                                type="primary"
                                // code={codes.addPressure}
                                disabled={disabled}
                                onClick={e => {
                                    this.addInfoPre(e);
                                }}
                                style={{ marginLeft: 8 }}
                                text="添加压夜"
                            />
                        </>
                    ),
                },
            ],
        };
        const commonParams = {
            getFieldDecorator,
        };
        let formItem = [
            [
                detailId && <AntdFormItem
                    label="业务类型"
                    code="businessType"
                    initialValue={detail.businessType || 'INLAND'}
                    {...commonParams}
                >
                    <AdSelect
                        disabled={true}
                        data={dictObject[allDictList.businessType]}
                        payload={{ code: allDictList.businessType }}
                    />
                </AntdFormItem>,
                <></>
            ],
            [
                <AntdFormItem
                    label="档案编号"
                    code="archivesNo"
                    initialValue={detail.archivesNo}
                    {...commonParams}
                >
                    <AntdInput disabled={true} placeholder="保存后系统自动生成" />
                </AntdFormItem>,
                <Form.Item label="状态">
                    {getFieldDecorator('status', {
                        initialValue: detail.status,
                    })(
                        <Select disabled={true}>
                            {archivesStatusList &&
                                archivesStatusList.map(item => <Option key={item.code}>{item.value}</Option>)}
                        </Select>
                    )}
                </Form.Item>,
            ],

            [
                <AntdFormItem
                    label="发车里程(KM)"
                    code="startMileage"
                    initialValue={detail.startMileage || ''}
                    {...commonParams}
                >
                    <AntdInput disabled={true} placeholder="" />
                </AntdFormItem>,
                <AntdFormItem
                    label="收车里程(KM)"
                    code="collectMileage"
                    initialValue={detail.collectMileage || ''}
                    {...commonParams}
                >
                    <AntdInput disabled={true} placeholder="" />
                </AntdFormItem>,
            ],

            [
                <AntdFormItem
                    label="发车时间"
                    code="transportStartTime"
                    initialValue={detail.transportStartTime || ''}
                    {...commonParams}
                >
                    <AntdInput disabled={true} placeholder="" />
                </AntdFormItem>,
                <AntdFormItem
                    label="收车时间"
                    code="transportEndTime"
                    initialValue={detail.transportEndTime || ''} 类型
                    {...commonParams}
                >
                    <AntdInput disabled={true} placeholder="" />
                </AntdFormItem>,
            ],

            [
                <AntdFormItem
                    label="汇总行驶里程(KM)"
                    code="travelMileage"
                    initialValue={detail.travelMileage || ''}
                    {...commonParams}
                >
                    <AntdInput disabled={true} placeholder="" />
                </AntdFormItem>,
                <AntdFormItem
                    label="汇总行驶时长"
                    code="travelTime"
                    initialValue={detail.travelTime || ''}
                    {...commonParams}
                >
                    <AntdInput disabled={true} placeholder="" />
                </AntdFormItem>,
            ],
            [
                <AntdFormItem
                    label="耗油量(L)"
                    code="consumptionOil"
                    initialValue={detail.consumptionOil || ''}
                    {...commonParams}
                >
                    <AntdInput disabled={true} placeholder="" />
                </AntdFormItem>,
                <AntdFormItem
                    label="百公里油耗(L)"
                    code="avgHundredConsump"
                    initialValue={detail.avgHundredConsump || ''}
                    {...commonParams}
                >
                    <AntdInput disabled={true} placeholder="" />
                </AntdFormItem>,
            ],
            [
                <AntdFormItem
                    label="车牌"
                    code="vehicleId"
                    initialValue={detail.cartPlate}
                    {...commonParams}
                    rules={[{ required: true }]}
                >
                    <SearchSelect
                        dataUrl="tms/tms-vehicle/selectListByArchives" ///tms/tms-vehicle/selectListByArchives (二车队)
                        url="tms/tms-archives/selectVehicleView_s" // selectedData只只有id时需要传url
                        selectedData={cars} // 选中值
                        multiple={false} // 是否多选
                        showValue="cartPlateOneNo"
                        searchName="cartPlate"
                        columns={columns1} // 表格展示列
                        onChange={val => this.getValue(val, 'cars')} // 获取选中值
                        scrollX={350}
                        disabled={disabled}
                        id="archiveslist_operate_1"
                        payload={{ categoryList: ['HEADSTOCK', 'CARLOAD'] }} //筛选为整车和车头的
                    />
                </AntdFormItem>,
                <AntdFormItem
                    label="所属公司"
                    code="mdsCompanyId"
                    initialValue={ownCompany ? ownCompany : detail.ownCompanyName}
                    {...commonParams}
                >
                    <AntdInput placeholder="" disabled={true} />
                </AntdFormItem>,

            ],
            [
                <AntdFormItem
                    label="ETC发车余额"
                    code="etcStartAmount"
                    initialValue={formatPrice(detail.etcStartAmount || startAmount)}
                    {...commonParams}
                >
                    <AntdInput disabled={disabled} mode="money" />
                </AntdFormItem>,
                <AntdFormItem
                    label="ETC收车余额"
                    code="etcEndAmount"
                    startAmount
                    initialValue={formatPrice(detail.etcEndAmount)}
                    {...commonParams}
                >
                    <AntdInput disabled={disabled} mode="money" />
                </AntdFormItem>
            ],
            [
                <AntdFormItem
                    label="是否计算油耗"
                    code="isOilAward"
                    initialValue={detail.isOilAward || "yes"}
                    rules={[{ required: true }]}
                    {...commonParams}
                >
                    <Radio.Group
                    // disabled={checkId ? true : false}
                    >
                        <Radio value="no" disabled={disabled}>否</Radio>
                        <Radio value="yes" disabled={disabled}>是</Radio>
                    </Radio.Group>
                </AntdFormItem>,
                <AntdFormItem
                    label="结算周期"
                    code="settlementDate"
                    rules={[{ required: true }]}
                    initialValue={
                        detail && detail.settlementDate
                            ? moment(detail.settlementDate, dateFormatByM)
                            : moment(new Date(), dateFormatByM)
                    }
                    {...commonParams}
                >
                    <MonthPicker disabled={disabled} style={{ width: "100%" }} />
                </AntdFormItem>,
            ],
            [
                <AntdFormItem
                    label="备注"
                    code="remark"
                    rules={[
                        {
                            validator: (rule, value, callback) => {
                                checkStrLength(rule, value, callback, 200, '备注');
                            },
                        },
                    ]}
                    initialValue={detail.remark}
                    {...commonParams}
                >
                    <TextArea disabled={disabled} rows={4} />
                </AntdFormItem>,
            ],
            [
                <AntdFormItem
                    label="附件"
                    code="attaQuantity"
                    initialValue={detail.fileList || []}
                    {...commonParams}
                >
                    <FileReader urlType="tms" disabled={disabled} />
                </AntdFormItem>,
            ],
        ];



        return (
            <EditPage {...editPageParams}>
                <Spin spinning={detailId ? loading : false}>
                    <AntdForm>{formItemFragement(formItem)}</AntdForm>
                </Spin>
                {detailId && detail.status !== 'UNSEALED' && (
                    <Fragment>
                        <ArchivesDriverslInfo businessType={detail.businessType} archivesId={detailId} isHK={isHK} />
                    </Fragment>
                )}
                {detailId && (
                    // 车次信息 编辑 表格  
                    <Fragment>
                        <TrainNumInfo
                            id={detailId}
                            visible={visibleTrain}
                            type={type}
                            setTrainInfoModal={this.setTrainInfoModal}
                            getArchivesDetails={this.getArchivesDetails}
                            disabled={disabled}
                            startMileage={startMileage}
                            isHK={isHK}
                            vehicleNo={cars[0] ? cars[0].cartPlateOneNo || detail.cartPlate : ''}

                        />
                    </Fragment>
                )}
                {detailId && (
                    <Fragment>
                        <OilInfo
                            onSelectRow={selectedRows => {
                                this.handleStateChange([{ selectedRows }]);
                            }}
                            detailId={detailId}
                            visibleOperate={visibleOperate}
                            setOilBindInfoModal={this.setOilBindInfoModal}
                            setOilInfoModal={this.setOilInfoModal}
                            type={type}
                            status={disabled}
                            disabled={disabled}
                            getArchivesDetails={this.getArchivesDetails}
                        />
                    </Fragment>
                )}
                <Fragment>
                    <PressureInfo
                        archivesId={detailId}
                        onlyRead={false}
                        onRef={this.onRef}
                        selectedRows={selectedRowsPre}
                        disabled={disabled}
                        onSelectRow={selectedRowsPre => this.handleStateChange([{ selectedRowsPre }])}
                        showTipsFun={this.showTipsFun}
                    />
                </Fragment>
            </EditPage>
        );
    }
}
